<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../../icon/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="../../../icon/font-awesome/css/font-awesome.min.css" />
    <style>
        .item {
            padding: 0 .2rem;
        }
        .aui-list .aui-list-item {
            background-size: 100% 0px;
            padding: .15rem .5rem;
        }
        .logout {
            background-color: #D2984E;
            color: #FFF;
            width: 96%;
            margin: 5rem auto;
            border-radius: 3px;
            padding: .6rem 0;
            text-align: center;
        }
        .aui-list-item-input input {
            display: inline-block;
            width: 50%;
            padding-left: 0.5rem
        }
        #btn_binding,
        #btn_password_pay,
        #btn_password {
            line-height: 2.1rem;
        }
        .dis {
            display: flex;
            justify-content: space-between;
        }
        header {
            padding: 1.6rem 0.8rem 0.5rem 0.8rem;
            width: 100%;
            /*border-bottom: 1px solid #ccc*/
        }
        header span:nth-of-type(1) {
            font-size: 1rem
        }
        header span:nth-of-type(2) {
            font-size: 1rem
        }
    </style>
</head>

<body>
    <header>
        <span class="iconfont icon-fanhui" onClick="api.closeWin()"></span>
        <span>个人信息</span>
    </header>
    <div class="max-box">
        <ul class="aui-list aui-form-list">
            <li class="aui-list-item" id="iossh_hide">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="fa fa-user-o"></i>
                        <span class="item">&nbsp;头像</span>
                        <input id="fileClick" type="file" value="" name="modifle" style="display:none;">
                    </div>
                    <div style="width:4rem;" class="aui-list-item-input">
                        <img id="modifyLogo" style="width:3rem; height:3rem; border-radius:50%;" alt="">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="fa fa-pencil-square-o"></i>
                        <span class="item">&nbsp;昵称：</span>
                    </div>
                    <div class="aui-list-item-input">
                        <input class="canImodify nickName" type="text" value="" name="Username" placeholder="昵称">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="fa fa-odnoklassniki-square"></i>
                        <span class="item">&nbsp;生日：</span>
                    </div>
                    <div class="aui-list-item-input">
                        <input class="canImodify" name="Userday" style="padding-top: 0.35rem;height: 30px;" type="date" value="" placeholder="生日">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="fa fa-venus-double"></i>
                        <span class="item">&nbsp;性别：</span>
                    </div>
                    <div class="aui-list-item-input">
                        <input class="canImodify" type="text" name="Usersex" value="" placeholder="性别">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="fa fa-envelope-o fa-fw"></i>
                        <span class="item">&nbsp;邮箱：</span>
                    </div>
                    <div class="aui-list-item-input">
                        <input style="width:100%;" class="canImodify" type="text" name="Useremail" value="" placeholder="邮箱">
                    </div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-mobile"></i>
                        <span class="item">&nbsp;手机号：</span>
                    </div>
                    <div class="aui-list-item-input dis">
                        <input type="number" value="" name="Usertel" readonly placeholder="手机号" id="tel">
                        <span id="btn_binding">重新绑定></span>
                    </div>

                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-lock"></i>
                        <span class="item">&nbsp;登录密码：</span>
                    </div>
                    <div class="aui-list-item-input dis">
                        <input readonly type="password" name="Userpwd" value="0000" style="overflow:visible" id="pass">
                        <span id="btn_password">修改登录密码></span>
                    </div>
                </div>
            </li>


            <!-- <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-label-icon">
                        <i class="aui-iconfont aui-icon-lock"></i>
                        <span class="item">&nbsp;支付密码：</span>
                    </div>
                    <div class="aui-list-item-input dis">
                        <input readonly type="password" name="Userpwd" value="0000" style="overflow:visible" id="pass">
                        <span id="btn_password_pay">修改支付密码></span>
                    </div>
                </div>
            </li> -->
        </ul>
        <div id="logoutSteam" class="logout">退出登录</div>
    </div>
</body>
<script type="text/javascript" src="../../../script/api.js"></script>
<script type="text/javascript" src="../../../lib/zepto.js"></script>
<script type="text/javascript" src="../../../script/dns.js"></script>
<script type="text/javascript" src="../../../script/aui-toast.js"></script>
<script type="text/javascript">
var perm;
    apiready = function() {
      api.addEventListener({
          name: "info_reload"
      }, function(ret, err) {
          window.location.reload();
      });

      ios_sh('#iossh_hide');//ios审核专用 
    };
    var toast = new auiToast({})
        //首次获取用户信息
    $(document).ready(function() {
        $.ajax({
            url: dns + 'user/read',
            type: "get",
            data: {},
            dataType: 'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", localStorage.getItem('token'));
            },
            success: function(res) {
                if (res.code == '20000') {
                    $('#modifyLogo').attr('src', res.data.user.avatar.filepath);
                    $("input[name='Username']").val(res.data.user.nickname);
                    $("input[name='Userday']").val(res.data.user.birthday);
                    $("input[name='Usersex']").val(res.data.user.sex == 1 ? '男' : '女');
                    $("input[name='Useremail']").val(res.data.user.email == '' ? '暂无' : res.data.user.email);
                    $("input[name='Usertel']").val(res.data.user.mobile);
                }
            },
            error: function(err) {
                console.log(err)
            }
        });

        //修改基本信息
        $('input.canImodify').blur(function() {
            var currentVal = $.trim($(this).val());
            if (currentVal != '') {
                if ($(this).attr('name') == 'Username') {
                    var data = {
                        'nickname': currentVal
                    }
                } else if ($(this).attr('name') == 'Userday') {
                    var data = {
                        'birthday': currentVal
                    }
                } else if ($(this).attr('name') == 'Usersex') {
                    if (currentVal == '男') {
                        var data = {
                            'sex': 1
                        }
                    } else if (currentVal == '女') {
                        var data = {
                            'sex': 2
                        }
                    } else {
                        toast.fail({
                            title: "请正确填写性别",
                            duration: 1500
                        });
                        $("input[name='Usersex']").val('');
                        return;
                    }
                } else {
                    var data = {
                        'email': currentVal
                    }
                }
                $.ajax({
                    url: dns + 'user/update/user',
                    type: 'POST',
                    data: data,
                    beforeSend: function(request) {
                        request.setRequestHeader("token", localStorage.getItem('token'));
                    },
                    success: function(ret) {
                        console.log(JSON.stringify(data));
                        toast.success({
                            title: "修改成功!",
                            duration: 1500
                        });
                        // 监听更新昵称之后刷新个人中心
                        api.sendEvent({
                            name: "header_reload"
                        })
                    },
                    error: function(msg) {

                    }
                });
            } else {
                toast.fail({
                    title: "修改不能为空哦!",
                    duration: 1500
                });
            }
        });

        //退出登录
        $('#logoutSteam').click(function() {
            api.confirm({
                title: "退出提示",
                msg: "确定要退出登录吗?",
                buttons: ["是", "否"]
            }, function(ret, err) {
                if (ret.buttonIndex == 1) { //确认退出
                    localStorage.removeItem('token'); //清除token
                    api.clearCache("token");
                    location.href = "../../system/login.html";
                } else {
                    return;
                }
            });
        });

    });

    $("#btn_binding").click(function() {
        var tel = $("#tel").val();
        localStorage.setItem("tel", tel);
        api.openWin({
            name: 'binding',
            url: './binding/binding.html',
            pageParam: {}, //页面代参数
            rect: {
                x: 0,
                y: 25,
                w: api.winWidth,
                h: api.winHeight
            }
        });
    });
    $("#btn_password").click(function() {
        var tel = $("#tel").val();
        localStorage.setItem("tel", tel);
        api.openWin({
            name: 'pass',
            url: './pass/pass.html',
            pageParam: {}, //页面代参数
            rect: {
                x: 0,
                y: 25,
                w: api.winWidth,
                h: api.winHeight
            }
        });
    });

    //修改图像
    $('#modifyLogo').click(function() {
        if (api.systemType == "android") {
            getiosPhpto();  //升级环境下编译
            return;
            //在非升级环境下编译用这方法
            var dialogBox = api.require('dialogBox');
            dialogBox.actionMenu({
                rect: {
                    h: 150
                },
                texts: {
                    cancel: '取消',
                },
                items: [{
                    text: '相册',
                    icon: 'xiangce.png'
                }, {
                    text: '相机',
                    icon: 'xiangji.png'
                }],
                styles: {
                    bg: '#FFF',
                    column: 2,
                    itemText: {
                        color: '#000',
                        size: 14,
                        marginT: 8
                    },
                    itemIcon: {
                        size: 32
                    },
                    cancel: {
                        bg: 'fs://icon.png',
                        color: '#000',
                        h: 44,
                        size: 14
                    }
                }
            }, function(ret) {
                if (ret.eventType === "click") {
                    if (ret.index == 0) { //调取相册
                        perm = 'storage'
                      if (!confirmPer(perm)) {
                        toast.fail({
                            title:"您当前没有权限!",
                            duration:2000
                        });
                          return;
                      }

                        if (perm == 'storage') {
                            getPhoto('album');
                        }


                    };
                    if (ret.index == 1) { //调取相机
                        //getPhoto('camera');
                        perm = 'camera'
                          if (!confirmPer(perm)) {
                            toast.fail({
                                title:"您当前没有权限!",
                                duration:2000
                            });
                              return;
                          }

                          if (perm == 'camera') {
                              getPhoto('camera');
                          }
                    };
                }
                dialogBox.close({ //关闭弹窗
                    dialogName: 'alert'
                });
            });
        };

        if (api.systemType == "ios") {
            getiosPhpto();
        };

    });
    //安卓 获取图片
    function getPhoto(type) {
        var imageCrop = api.require('imageCrop');
        if (type == 'album') {
            imageCrop.getPhoto(function(ret, err) {
                if (ret) {
                    imageCrop.clipPhoto({
                        imgPath: ret.imgPath,
                        height: 300,
                        width: 300
                    }, function(ret, err) {
                      var Suffixname1 = JSON.stringify(ret.imgPath)
                      var index = Suffixname1.lastIndexOf(".");
                      Suffixname1 = Suffixname1.substring(index + 1, Suffixname1.length - 1);
                        if (ret) {
                          if(Suffixname1 === 'jpg' || Suffixname1 === 'jpeg'){
                            var roteimg = api.require('exifInterface');
                                roteimg.setDegreeExif({
                                    picPath : ret.imgPath,
                                    degrees :0
                                },function(ret, err) { //imageCrop在安卓上裁剪图片会发成旋转,exifInterface 旋转纠正返回新的地址 newPicPath
                                  var Suffixname = JSON.stringify(ret.newPicPath)
                                  var index = Suffixname.lastIndexOf(".");
                                  Suffixname = Suffixname.substring(index + 1, Suffixname.length - 1); //获取后缀名 拼接 到 base64传给服务端
                                  var trans = api.require('trans'); //图片转Base64
                                  trans.decodeImgToBase64({
                                      imgPath: ret.newPicPath
                                  }, function(ret, err) {
                                      if (ret.status) {
                                          var base64Str = 'data:image/jpeg;base64,' + JSON.stringify(ret.base64Str).replace(/\"/g, "");
                                          uploadImage(base64Str);
                                      } else {
                                          toast.fail({
                                              title: "网络错误，稍后再试",
                                              duration: 1500
                                          });
                                      }
                                  });
                                });
                          }else{
                                  var Suffixname = JSON.stringify(ret.imgPath)
                                  var index = Suffixname.lastIndexOf(".");
                                  Suffixname = Suffixname.substring(index + 1, Suffixname.length - 1); //获取后缀名 拼接 到 base64传给服务端
                                  var trans = api.require('trans'); //图片转Base64
                                  trans.decodeImgToBase64({
                                      imgPath: ret.imgPath
                                  }, function(ret, err) {
                                      if (ret.status) {
                                          var base64Str = 'data:image/jpeg;base64,' + JSON.stringify(ret.base64Str).replace(/\"/g, "");
                                          uploadImage(base64Str);
                                      } else {
                                          toast.fail({
                                              title: "网络错误，稍后再试",
                                              duration: 1500
                                          });
                                      }
                                  });

                          }

                        } else {
                            toast.fail({
                                title: "网络错误，稍后再试",
                                duration: 1500
                            });
                        }
                    });
                } else {
                    toast.fail({
                        title: "网络错误，稍后再试",
                        duration: 1500
                    });
                }
            });
        } else {
            imageCrop.takePhoto(function(ret, err) {
              if (ret) {
                  imageCrop.clipPhoto({
                      imgPath: ret.imgPath,
                      height: 300,
                      width: 300
                  }, function(ret, err) {
                    var Suffixname1 = JSON.stringify(ret.imgPath)
                    var index = Suffixname1.lastIndexOf(".");
                    Suffixname1 = Suffixname1.substring(index + 1, Suffixname1.length - 1);
                      if (ret) {
                        if(Suffixname1 === 'jpg' || Suffixname1 === 'jpeg'){
                          var roteimg = api.require('exifInterface');
                              roteimg.setDegreeExif({
                                  picPath : ret.imgPath,
                                  degrees :0
                              },function(ret, err) { //imageCrop在安卓上裁剪图片会发成旋转,exifInterface 旋转纠正返回新的地址 newPicPath
                                var Suffixname = JSON.stringify(ret.newPicPath)
                                var index = Suffixname.lastIndexOf(".");
                                Suffixname = Suffixname.substring(index + 1, Suffixname.length - 1); //获取后缀名 拼接 到 base64传给服务端
                                var trans = api.require('trans'); //图片转Base64
                                trans.decodeImgToBase64({
                                    imgPath: ret.newPicPath
                                }, function(ret, err) {
                                    if (ret.status) {
                                        var base64Str = 'data:image/jpeg;base64,' + JSON.stringify(ret.base64Str).replace(/\"/g, "");
                                        uploadImage(base64Str);
                                    } else {
                                        toast.fail({
                                            title: "网络错误，稍后再试",
                                            duration: 1500
                                        });
                                    }
                                });
                              });
                        }else{
                                var Suffixname = JSON.stringify(ret.imgPath)
                                var index = Suffixname.lastIndexOf(".");
                                Suffixname = Suffixname.substring(index + 1, Suffixname.length - 1); //获取后缀名 拼接 到 base64传给服务端
                                var trans = api.require('trans'); //图片转Base64
                                trans.decodeImgToBase64({
                                    imgPath: ret.imgPath
                                }, function(ret, err) {
                                    if (ret.status) {
                                        var base64Str = 'data:image/jpeg;base64,' + JSON.stringify(ret.base64Str).replace(/\"/g, "");
                                        uploadImage(base64Str);
                                    } else {
                                        toast.fail({
                                            title: "网络错误，稍后再试",
                                            duration: 1500
                                        });
                                    }
                                });

                        }

                      } else {
                          toast.fail({
                              title: "网络错误，稍后再试",
                              duration: 1500
                          });
                      }
                  });
              } else {
                  toast.fail({
                      title: "网络错误，稍后再试",
                      duration: 1500
                  });
              }
            });
        }
    }

    //ios 获取图片
    function getiosPhpto() {
        api.actionSheet({
            cancelTitle: '取消',
            buttons: ['相机', '相册']
        }, function(ret, err) {
            if (ret.buttonIndex != 3) {
                var _sourceType = ""
                if (ret.buttonIndex == 1) {
                    _sourceType = 'camera';
                } else {
                    _sourceType = 'library';
                }
                api.getPicture({
                    sourceType: _sourceType,
                    allowEdit: true,
                    quality: 100
                }, function(ret, err) {
                    if (ret && ret.data) {
                      api.openWin({
                          name: 'clip',
                          url: './clip.html',
                          pageParam: {'imgUrl':ret.data}, //跳转裁剪页面--头像裁剪
                          rect: {
                              x: 0,
                              y: 0,
                              w: api.winWidth,
                              h: api.winHeight
                          }
                      });
                    } else {
                        toast.fail({
                            title: "取消选择",
                            duration: 1500
                        });
                    }
                });
            }
        });
    }

    //上传图片
    function uploadImage(str) {
        var demo = api.require('UIImageEdit');
        $.ajax({
            type: "post",
            url: dns + 'upload/image/base64',
            data: {
                'base64': str
            }, //传过来
            dataType: 'json',
            beforeSend: function(request) {
                request.setRequestHeader("token", localStorage.getItem('token'));
            },
            success: function(data) {
                $('#modifyLogo').attr({
                    'data-id': data.data.id,
                    'src': data.data.src
                }); //改变当前的显示图片

                //更新头像
                $.ajax({
                    url: dns + 'user/update/user',
                    type: 'POST',
                    data: {
                        'avatar': $('#modifyLogo').data('id')
                    },
                    beforeSend: function(request) {
                        request.setRequestHeader("token", localStorage.getItem('token'));
                    },
                    success: function(ret) {
                        console.log(JSON.stringify(ret));
                        toast.success({
                            title: "修改成功!",
                            duration: 1500
                        });
                        // 监听更新头像之后刷新个人中心
                        api.sendEvent({
                            name: "header_reload"
                        });
                        if (api.systemType == "ios") {
                            api.closeWin();
                        }

                    },
                    error: function(msg) {
                        toast.fail({
                            title: "网络错误",
                            duration: 1500
                        });
                    }
                });
            },
            error: function(err) {
                console.log(err)
            }
        });
    }

    // $('#modifyLogo').click(function() {
    //     $('#fileClick').click();
    // });
    // $('#fileClick').on('change', function() { //当 input file 已经选中时触发js
    //     var formData = new FormData(); //先实例化formdata
    //     var file = this.files[0]; //获取文件名
    //     var id = this.id; //本input的id
    //     formData.append("file", file); //append方法用于向formdata中注入内容
    //     $.ajax({
    //         type: "post",
    //         url: dns + 'upload/image',
    //         contentType: false,
    //         processData: false,
    //         data: formData, //传过来
    //         dataType: 'json',
    //         cache: false,
    //         contentType: false,
    //         processData: false,
    //         beforeSend: function(request) {
    //             request.setRequestHeader("token", localStorage.getItem('token'));
    //         },
    //         success: function(data) {　　　
    //             $('#modifyLogo').attr({
    //                 'data-id': data.data.id,
    //                 'src': data.data.src
    //             }); //改变当前的显示图片
    //
    //             //更新头像
    //             $.ajax({
    //                 url: dns + 'user/update/user',
    //                 type: 'POST',
    //                 data: {
    //                     'avatar': $('#modifyLogo').data('id')
    //                 },
    //                 beforeSend: function(request) {
    //                     request.setRequestHeader("token", localStorage.getItem('token'));
    //                 },
    //                 success: function(ret) {
    //                     toast.success({
    //                         title: "修改成功!",
    //                         duration: 1500
    //                     });
    //                     // 监听更新头像之后刷新个人中心
    //                     api.sendEvent({
    //                         name: "header_reload"
    //                     })
    //                 },
    //                 error: function(msg) {
    //
    //                 }
    //             });
    //         },
    //         error: function(err) {
    //             console.log(err)
    //         }
    //     });
    // });
</script>

</html>
